<template>
  <div :key="value" :class="baseClassName">
    <a-tooltip v-for="item in list" :key="item.key" :title="item.title">
      <div
        :class="[`${baseClassName}-item`]"
        @click="() => $emit('onChange', item.key)"
      >
        <img :src="item.url" :alt="item.key">
        <div
          :class="[`${baseClassName}-selectIcon`]"
          :style="{ display: value === item.key ? 'block' : 'none' }"
        >
          <CheckOutlined />
        </div>
      </div>
    </a-tooltip>
  </div>
</template>

<script>
    import { CheckOutlined } from '@ant-design/icons-vue'
    export default {
        name: 'BlockCheckbox',
        components: {
            CheckOutlined
        },
        props: {
            list: {
                type: Array,
                default: function() {
                    return []
                }
            },
            value: {}
        },
        data() {
            return {
                baseClassName: 'ant-pro-setting-drawer-block-checbox'
            }
        }
    }
</script>
